/**
 * @Author: ls <ls-mac>
 * @Date:   2020-05-18 14:14:57
 * @Last modified by:   ls-mac
 * @Last modified time: 2020-05-20 13:58:57
 */
class mapDemo {
  constructor() {
    this.map = new BMap.Map("mapContainer");
    this.labelStyle = {
      // 设置label的样式
      color: "#fff",
      width: "200px",
      height: "100px",
      padding: "20px",
      fontSize: "16px",
      borderRadius: "6px"
    };
  }
  init() {
    // 118.78, 32.04
    const point = new BMap.Point(119, 35);
    this.map.centerAndZoom(point, 6);

    this.renderPointMotor();
    this.renderPointMotor2();

    this.renderPointRail();
    this.renderPointRail2();

    this.renderPointWater();
    this.renderPointWater2();
  }
  // 渲染汽运点
  renderPointMotor() {
    const o = { lat: 40.058692, lng: 116.30799 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-motor.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);
  }
  // 渲染当前汽运点
  renderPointMotor2() {
    const o = { lat: 43.058692, lng: 116.30799 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-motor2.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);

    // 渲染标注
    const content =
      "<div class='map-label-conatiner map-label-motor'>1111</div>";
    const label = new BMap.Label(content, {
      // 创建文本标注
      position: point,
      offset: new BMap.Size(-120, -200)
    });
    this.map.addOverlay(label); // 将标注添加到地图中

    label.setStyle({
      ...this.labelStyle,
      ...{
        background: "rgba(0,164,234,1)",
        border: "4px solid rgba(0,102,195,1)"
      }
    });
  }
  // 渲染水运点
  renderPointWater() {
    const o = { lat: 36.9, lng: 112.425 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-water.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);
  }
  // 渲染当前水运点
  renderPointWater2() {
    const o = { lat: 32.9, lng: 99.425 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-water2.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);

    // 渲染标注
    const content =
      "<div class='map-label-conatiner map-label-water'>1111</div>";
    const label = new BMap.Label(content, {
      // 创建文本标注
      position: point,
      offset: new BMap.Size(-120, -200)
    });
    this.map.addOverlay(label); // 将标注添加到地图中
    label.setStyle({
      ...this.labelStyle,
      ...{
        background: "rgba(153,176,0,1)",
        border: "4px solid rgba(104,120,0,1)"
      }
    });
  }
  // 渲染铁运点
  renderPointRail() {
    const o = { lat: 34.9, lng: 116.425 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-rail.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);
  }

  // 渲染当前铁运点
  renderPointRail2() {
    const o = { lat: 31.9, lng: 130.425 };
    const point = new BMap.Point(o.lng, o.lat);
    const myIcon = new BMap.Icon(
      "../../assets/img/map-images/map-rail2.png",
      new BMap.Size(44, 56)
    );

    const marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注
    this.map.addOverlay(marker);

    // 渲染标注
    const content =
      '<div class="map-label-conatiner map-label-rail">11211</div>';
    const label = new BMap.Label(content, {
      // 创建文本标注
      position: point,
      offset: new BMap.Size(-120, -200)
    });

    this.map.addOverlay(label); // 将标注添加到地图中

    label.setStyle({
      ...this.labelStyle,
      ...{
        background: "rgba(255,114,84,1)",
        border: "4px solid rgba(176,35,35,1)"
      }
    });
  }
}

$(function() {
  const map = new mapDemo();
  map.init();
});
